<template>
    <div>
        <!-- 设置一个容器合适大小 -->
        <div id="E" style="width: 100vw;height:100vh;"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            Elist: [],
        }
    },
    methods: {
        //初始化容器
        initEcharts() {
            const myChart = this.$echarts.init(document.getElementById('E'));
            const seriesdata = [];
            for (let i = 0; i < this.Elist.length; i++) {
                const item = this.Elist[i];
                let series = {
                    name: item.name,
                    data: [{ value: item.value, name: item.name }],
                }
                seriesdata.push(series)
            }
            myChart.setOption({
                title: { text: '种植农作物面积统计' },
                tooltip: {
                    trigger: 'item',//类型触发提示框
                },
                legend: {
                    orient: 'horizontal',//图例列表的布局朝向
                    left: 'center'
                },
                series: [
                    {
                        name: seriesdata.map((item) => { return item.name }),
                        type: 'pie',
                        radius: '50%',
                        data: seriesdata.map((item) => { return item.data[0] }),
                    }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            })
        },
        getE() {
            this.$http('/api/TotalAreaCropsProportion', 'get').then(res => {
                console.log(res);
                this.Elist = res
                this.initEcharts()
            }).catch(err => {
                console.log(err)
            })
        },
    },
    mounted() {
        this.getE()

    }
}
</script>

<style lang="less" scoped></style>